<template>
	<view>

		<button>
			<span class="text">Button</span>
			<span class="blob"></span>
			<span class="blob"></span>
			<span class="blob"></span>
			<span class="blob"></span>
		</button>

	</view>
</template>

<script>
	export default {
		name: "button7",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	/* From Uiverse.io by adamgiebl */
	button {
		position: relative;
		font-family: inherit;
		font-size: 18px;
		border-radius: 40em;
		width: 8em;
		height: 3em;
		z-index: 1;
		color: white;
		cursor: pointer;
		overflow: hidden;
		border: none;
	}

	button .text {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		line-height: 3em;
		border-radius: 40em;
		border: none;
		background: linear-gradient(rgba(255, 255, 255, 0.473),
				rgba(150, 150, 150, 0.25));
		z-index: 1;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}

	button .blob {
		position: absolute;
		z-index: -1;
		border-radius: 5em;
		width: 5em;
		height: 3em;
		transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
	}

	button .blob:nth-child(2) {
		left: 0em;
		top: 0;
		background: #ff930f;
	}

	button .blob:nth-child(3) {
		left: 1.8em;
		top: 0;
		z-index: -1;
		background: #bf0fff;
	}

	button .blob:nth-child(4) {
		left: 4em;
		top: -1em;
		background: #ff1b6b;
	}

	button .blob:nth-child(5) {
		left: 4.3em;
		top: 1.6em;
		background: #0061ff;
	}

	button:hover .blob:nth-child(2) {
		background: #0061ff;
	}

	button:hover .blob:nth-child(3) {
		background: #ff1b6b;
	}

	button:hover .blob:nth-child(4) {
		background: #bf0fff;
	}

	button:hover .blob:nth-child(5) {
		background: #ff930f;
	}

	button:hover .blob {
		transform: scale(1.3);
	}

	button:active {
		border: 2px solid white;
	}
</style>